<template>
  <div class="shopfooter">
    <van-tabbar v-model="tabIndex" route>
      <van-tabbar-item
      v-for= "(tabbar, index) in tabbars"
      :key= "tabbar.name"
      :icon="tabbar.meta.icon"
      :to= "tabbar.path"
      :class="{ 'van-tabbar-item--active' : index === tabIndex }"
      >{{tabbar.meta.title}}
      <span v-if="tabbar.name === 'Cart'"  class="reminder">{{totleCount}}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import routes from '@/router/routes'
export default {
  data () {
    return {
      tabIndex: 0
    }
  },
  name: 'shop-footer',
  components: {
  },
  computed: {
    ...mapGetters(['totleCount']),
    tabbars () {
      return routes.filter(route => route.meta.isTabbar)
    }
  },
  created () {
    this.tabbars.forEach((tab, index) => {
      // 路由的index与当前点击的index能够匹配的到
      if (tab.path === '/' + this.$route.path.split('/')[1]) {
        this.tabIndex = index
      }
    })
  }
}
</script>
<style>
.shopfooter .van-tabbar-item--active {
  color: #ffd000;
}
.van-tabbar-item{
  position: relative;
}
.reminder{
  top: 3px;
  left:53px;
  font-size: 12px;
  position: absolute;
  background-color:red;
  border-radius: 10px;
  color: white;
  padding: 2px 2px;
  line-height: 12px;
  text-align: center;
}
</style>
